<template>
    <div class="ceiling-content clearfix nav-model-exhibit">
        <a @click="logoClick" class="list-logo" :alt="siteConf.site_name" style="height: auto !important;" :title="siteConf.site_name">
            <img :src="siteConf.logo2" style="width: 146px; height: 40px;" :alt="siteConf.site_name" :title="siteConf.site_name">
        </a>
        <div class="model-search-input">
            <div class="model-class-select" style="color: #e95513 !important;">
                <span>{{ checkMenu.title }}</span>
            </div>
            <el-icon size="20" style="top: 15px !important; left: 105px !important;"  class="icon icon_search"><Search /></el-icon>
         
            <input class="search-keyword js-search-normal" style="color: #fff !important;" type="text" 
                placeholder="搜索ID、关键词" v-model="search.searchValue"   @keyup.enter="handleSearch">
                <el-icon size="20" style="top: 15px !important;" class="icon del_key_display" :style="search.searchValue ? 'display:block !important;' : ''"  @click="clearClick()"><Close /></el-icon>
          
            <!-- <span class="btn-search-keyword js-search-btn">搜索</span> -->
        </div>
        <ul class="ceiling-nav-class clearfix" style="display: none;">
            <!-- 分类筛选 -->
            <li style="">
                <p class="nav-ceiling-label">
                    <span>沙发</span>
                    <el-icon class="icon">
                        <ArrowDown />
                    </el-icon>
                </p>
                <div class="ceiling-model-content">
                    <ul class="ceiling-model-classification">
                        <li data-son="0" class="active">
                            <a href="#" class="active">
                                全部 <el-icon class="icon icon_arrow_right">
                                    <ArrowRight />
                                </el-icon>
                            </a>
                        </li>
                        <li class="">
                            <a href="#" class="">
                                沙发 <el-icon class="icon icon_arrow_right">
                                    <ArrowRight />
                                </el-icon>
                            </a>
                        </li>

                    </ul>
                </div>
            </li>
            <li class="min-ceiling-hide">
                <p class="nav-ceiling-label">
                    <span>渲染器</span>
                    <el-icon class="icon icon_arrow_right">
                                    <ArrowDown />
                                </el-icon>
                </p>
                <div class="drop-down-content">
                    <div class="sort-list">
                        <a rel="nofollow" ll-buriedpoint="3-0" sc-point="1" ll-buriedpoint-type="click_res_list_filter"
                            class="active ll_point_jsfun" href="#">全部</a>
                        <a rel="nofollow" ll-buriedpoint="3-1" sc-point="1" ll-buriedpoint-type="click_res_list_filter"
                            class="ll_point_jsfun" href="#">VR</a>
                        <a rel="nofollow" ll-buriedpoint="3-2" sc-point="1" ll-buriedpoint-type="click_res_list_filter"
                            class="ll_point_jsfun" href="#">CR</a>
                    </div>
                </div>
            </li>
            <li class="min-ceiling-hide">
                <p class="nav-ceiling-label">
                    <span class="js-recommend-title">推荐类型</span>
                    <el-icon class="icon icon_arrow_right">
                                    <ArrowDown />
                                </el-icon>
                </p>
                <div class="drop-down-content">
                    <div class="sort-list">
                        <a ll-buriedpoint="4-0" sc-point="2" ll-buriedpoint-type="click_res_list_filter" rel="nofollow"
                            class="active ll_point_jsfun" href="#">全部</a>
                        <a ll-buriedpoint="4-1" sc-point="2" ll-buriedpoint-type="click_res_list_filter" rel="nofollow"
                            class="ll_point_jsfun" href="#">精品</a>
                        <a ll-buriedpoint="4-2" sc-point="2" ll-buriedpoint-type="click_res_list_filter" rel="nofollow"
                            class="ll_point_jsfun" href="#">品牌</a>
                        <a ll-buriedpoint="0-2" sc-point="2" ll-buriedpoint-type="click_res_list_filter" rel="nofollow"
                            class="ll_point_jsfun" href="#">VIP</a>
                    </div>
                </div>
            </li>
            <!-- 风格筛选 -->
            <li>
                <p class="nav-ceiling-label">
                    <span>全部风格</span>
                    <el-icon class="icon icon_arrow_right">
                                    <ArrowDown />
                                </el-icon>
                </p>
                <div class="drop-down-content">
                    <div class="sort-list">
                        <a sc-point="3" rel="nofollow" href="#" class="active">全部</a>
                        <a sc-point="3" rel="nofollow" href="#" class="">现代</a>

                    </div>
                </div>
            </li>
            <!-- 文件大小  -->
            <li>
                <p class="nav-ceiling-label">
                    <span class="js-recommend-title">压缩包大小</span>
                    <el-icon class="icon icon_arrow_right">
                                    <ArrowDown />
                                </el-icon>
                </p>
                <div class="drop-down-content size-down-content">
                    <div class="sort-list">
                        <a rel="nofollow" sc-point="15" ll-buriedpoint-type="click_res_list_filter" href="#"
                            class="active" buried-text="0-1">全部大小</a>
                        <a rel="nofollow" sc-point="15" ll-buriedpoint-type="click_res_list_filter" href="#" class=""
                            buried-text="0-1">≤1M</a>
                        <div class="sort-item-clean">
                            <span class="tip">自定义筛选项</span>
                            <span class="sort-size-empty" style="display: none;">清除</span>
                        </div>
                        <div class="size-input-custom">
                            <input type="text" class="screen-size-num1" value="">
                            <span>-</span>
                            <input type="text" class="screen-size-num2" value="">
                            <span>M</span>
                        </div>
                        <div class="sort-item-size-btn clearfix">
                            <span class="sort-for-search">筛选</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="ceiling-right-operation clearfix" style="display: none;">
            <li>
                <a rel="nofollow" class="right-delete">

                    <el-icon class="icon">
                        <RefreshLeft />
                    </el-icon>
                    <span>重置筛选</span>
                </a>
            </li>
        </ul>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, computed } from 'vue'
import { useUserInfo } from '../stores/userInfo'
import { useSiteConfig } from '../stores/siteConfig'
import { useNavConfig } from '../stores/navConfig'
import router from '../router';
const userInfo = useUserInfo() //获取用户信息
const siteConf = useSiteConfig()
const navConfig = useNavConfig()
import eventBus from '../utils/event-bus';
import { useSearch } from "../stores/search";
const search = useSearch()
const checkMenu:any = navConfig.click_menu
const logoClick = () =>{
    router.push({path:'/dashboard'})
}

//enter触发搜索
const handleSearch = () => {
    console.log(search.searchValue)
    if (userInfo.isLogin()) {
        search.setSearchValue(search.searchValue)
        eventBus.emit('initProduct')
        nextTick(() => {
            router.push({ name: '/product' })
        })
    }

}
//清空搜索
const clearClick = () => {
    if (userInfo.isLogin()) {
        search.clearSearchValue()
        //执行
        eventBus.emit('initProduct')
        nextTick(() => {
            router.push({ name: '/product' })
        })
    }
}
</script>
<style>
@import url("../style/produce.css");
</style>